<template>
	<view class="container">
		<view id="map" class="map"></view>
		<!-- <map latitude="39.9093" longitude="116.3974" markers="{{markers}}" class="map"></map> -->
	</view>
</template>

<script>
export default {
	name: "MapPage",
	data() {
		return {
			map: null, // 地图实例
			marker: null, // 标记点实例
			infoWindow: null, // 信息窗口实例
		};
	},
	mounted() {
		// 仅 H5 端初始化地图
		// #ifdef H5  
		this.$nextTick(() => {
			if (typeof AMap !== 'undefined') {
				this.initMap();
			} else {
				this.loadAMapScript(); // 动态加载脚本  
			}
		});
		// #endif  
	},
	methods: {
		loadAMapScript() {
			// 加载高德地图 JS API
			const AMapScript = document.createElement("script");
			AMapScript.src =
				"https://webapi.amap.com/maps?v=1.4.15&key=356bb0e716ef25665534c3e1852c99bd";
			AMapScript.onload = () => {
				this.createMap();
			};
			document.body.appendChild(AMapScript);
		},
		createMap() {
			// 初始化地图
			this.map = new AMap.Map("map", {
				resizeEnable: true,
				zoom: 14, // 缩放级别
				center: [116.397428, 39.90923], // 地图中心点（北京天安门）
				// lang: "en", // 界面语言
			});

			// 添加一个标记点
			this.marker = new AMap.Marker({
				position: [116.397428, 39.90923], // 标记点位置
				map: this.map, // 添加到地图
				title: "天安门", // 标记点标题
			});

			// 创建信息窗口
			this.infoWindow = new AMap.InfoWindow({
				content: "<div style='padding:10px;'>这是天安门</div>", // 信息窗口内容
				offset: new AMap.Pixel(0, -30), // 信息窗口相对标记点的偏移量
			});

			// 默认显示信息窗口
			this.infoWindow.open(this.map, this.marker.getPosition());

			// 给标记点添加点击事件，显示信息窗口
			this.marker.on("click", () => {
				this.infoWindow.open(this.map, this.marker.getPosition());
			});
		},
	},
};
</script>

<style>
.container {
	width: 100%;
	height: 100%;
}

.map {
	width: 100%;
	height: 100vh;
}
</style>